<template >
  <div class="SongItem" v-if='songLists'>
    <!-- 背景蒙层 -->
    <div class="mc" :style="`background-image:url(${songLists.playlist.coverImgUrl})`"></div>

    <div class="back">
      <i class="fa fa-angle-left" @click="back"></i>
      <span>歌单</span>
      <i class="fa fa-share-square-o" aria-hidden="true"></i>
    </div>
    <!-- 歌单头部信息 -->
    <div class="SongItem_top" >
      <div class="left" v-if="songLists">
        <span>歌单</span>
        <img :src="songLists.playlist.coverImgUrl">
        <p>{{songLists.playlist.playCount|formatNum}}</p>
      </div>
      <div class="right">
        <div class="title">{{songLists.playlist.name}}</div>
        <div class="user">
          <div class="userimg">
             <img :src="songLists.playlist.creator.avatarUrl" alt="">
          </div>
          <span class="username">{{songLists.playlist.creator.nickname}}</span>
        </div>
      </div>
    </div>

    <div class="songlists">歌曲列表&nbsp;&nbsp;&nbsp;&nbsp;共{{songallList.length}}首</div>
    <!-- 歌单歌曲 -->
    <div class="SongItem_list">
        <ul class="songlist">
        <li v-for="(item,index) in songallList" :key='item.id'  @click="$emit('play',item)">
          <i>{{index+1}}</i>
          <div class="left">
            <h5>{{item.name}}</h5>
            <p>{{item.ar[0].name}} -{{item.al.name}}</p>
          </div>
          <div class="right">
            <a class="playBtn" href="javascript:;"></a>
          </div>
        </li>
      </ul>
    </div>
    <!-- 歌单评论 -->
    <div class="songlists">评论列表</div>

    <div class="commentList">
      <ul class="comments">
        <li v-for="(item,index) in showcommlist" :key="index">
          <div class="left"><img :src="item.user.avatarUrl"></div>
          <div class="right">
            <p class="CommnetName">{{item.user.nickname}}</p>
            <p class="CommentDate">{{item.time|formatch}}</p>
            <p class="Comments">{{item.content}}</p>
          </div>
        </li>
      </ul>
    </div>
    <p class="loadermore" @click = 'loadermore' ref='nomore'>加载更多</p>
  </div>
</template>
<script>
export default {
 props:['id'],
 data(){
   return{
    songLists:'',
    songallList:[],
    commentList:[],
    showcommlist:[],
    limit:10,
    showLoading:"true",
   }
 }, 
 
 filters:{
    formatNum(value){
      return (value / 10000).toFixed(1)+'万'
    },
    formatch(value){
      let d = new Date(value)
      return  (d.getFullYear())+'年'+(d.getMonth()+1)+'月'+(d.getDay())+'日'
    }
  },
 created(){
  //  歌单详情
  this.$http.get('/playlist/detail',{
    params:{
      id:this.id
    }
    }).then(da=>{
      // console.log(d.data);
      // 获取歌单头部信息
      this.songLists = da.data
      // 获取歌单歌曲信息
      this.songallList = da.data.playlist.tracks;
      this.hotlist = da.data.playlist.tracks.map((d)=>{
        // 把返回的 tracks里面的数据 ar 转为 输出里面的数据
        let data = d;
            data.song={
              artists:d.ar, 
            }
        return data
      });
      // console.log( this.songallList);
    })
    // 获取评论
    this.$http.get('/comment/playlist',{
      params:{
        id:this.id
      }
    }).then(d=>{
      // console.log(d.data);
      let hotComment = d.data.hotComments;
      // console.log(hotComment);
      let comments = d.data.comments
      // console.log(comments);
      let result = []
      result = result.concat(hotComment,comments)
      this.commentList = result;

      this.showcommlist =  this.commentList.slice(0,this.limit)
      this.showLoading = false
      // console.log(this.commentList);
    })
 },
 methods:{
   loadermore(){
     this.showLoading = true;
     let num = this.showcommlist.length + this.limit;
     this.showcommlist = this.commentList.slice(0,num);
     this.showLoading = false
     if(this.showcommlist.length >= this.commentList.length){
       this.$refs.nomore.innerHTML = '没有更多数据了'
     }
   },
   back(){
     this.$router.go(-1)
   }
 },
}
</script>
<style lang="less" scoped>
.SongItem{
  margin-top: -124px;
  position: relative;
  overflow: hidden;
  .back{
    display: flex;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 45px;
    width: 100%;
    i.fa-angle-left{
      flex: 1;
      line-height: 45px;
      text-align: center;
      display: inline-block;
      color: #fff;
    }
    span{
      flex: 3;
      text-align: center;
      line-height: 45px;
      color: #fff;
    }
    i.fa-share-square-o{
      flex: 1;
      line-height: 45px;
      text-align: center;
      display: inline-block;
      color: #fff;
    } 
  }
  .mc{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 187px;
    background-repeat: no-repeat;
    z-index: -1;
    background-size: cover;
    filter: blur(20px);
    transform: scale(1.5);

  }
  .SongItem_top{
    height: 145px;
    padding: 75px 10px 30px 15px;
    display: flex;
    .left{
      width: 145px;
      height: 145px;
      position: relative;
      span{
        position: absolute;
        z-index: 3;
        top: 10px;
        left: 0;
        padding: 0 8px;
        height: 17px;
        color: #fff;
        font-size: 9px;
        text-align: center;
        line-height: 17px;
        background-color: rgba(217,48,48,.8);
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px
      }
      img{
        height: 100%;
      }
      p{
        position: absolute;
        right: 5px;
        top: 2px;
        z-index: 3;
        padding-left: 13px;
        color: #fff;
        font-size: 12px;
        background-position: 0;
        background-image: url();
        background-repeat: no-repeat;
        background-size: 11px 10px;
        text-shadow: 1px 0 0 rgb(0,0,0/15%);
      }
    }
    .right{
      margin-left: 16px;
      .title{
        padding-top: 1px;
        font-size: 17px;
        line-height: 1.3;
        color: #fefefe;
        height: 44px;
      }
      .user{
        display: flex;
        margin-top: 20px;
        .userimg{
          width: 30px;
          height: 30px;
          margin-right: 5px;
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .username{
          line-height: 30px;
          font-size: 14px;
          color: hsla(0,0%,100%,.7);
        }
      }
    }
  }
  .songlists{
    height: 23px;
    line-height: 23px;
    padding: 0 10px;
    font-size: 12px;
    color: #666;
    // background-color: #eeeff0
  }
  .songlist{
  li{
     padding: 6px 0px;
     display: flex;
     border: 0px solid transparent;
     border-bottom: 1px solid #F4F4F4;
     i{
        font-style: normal;
        line-height: 42px;
        width: 37px;
        font-size: 17px;
        text-align: center;
        color: #999;
     }
     i.red{
       color:#EE6A22;
     }
     .left{
       flex: 1;
       overflow: hidden;
       h5{
         font-size: 17px;
         font-weight: 400;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       p{
          font-size: 12px;
          color: #888;
          margin-top: 3px;
          i.sq{
            display: inline-block;
            width: 12px;
            height: 8px;
            margin-right: 4px;
            background: url('../assets/index_icon_2x.png') no-repeat;
            background-position: 0 0;
            background-size: 166px 97px;
          }
       }
      }
     .right{
        width: 22px;
        height: 42px;
        padding: 0px 10px;
        display: flex;
        align-items: center;
        .playBtn{
          display: inline-block;
          width: 22px;
          height: 22px;
          background: url('../assets/index_icon_2x.png') no-repeat;
          background-position: -24px 0;
          background-size: 166px 97px;
        }
    }
  } 
}
.commentList{
  .comments{
    li{
      display: flex;
      align-items: center;
      .left{
        width: 34px;
        margin: 0px 10px;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .right{
          width: 100%;
          border-bottom: 1px solid #F4F4F4;
          padding: 10px 0px;
        .CommnetName{
          font-size: 14px;
          color: #666;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap
        }
        .CommentDate{
          font-size: 9px;
          color: #999;
        }
        .Comments{
          color: #333;
          font-size: 13px;
          line-height: 22px;
          margin-top: 4px;

        }
       
      }
    }
  }
}
.loadermore{
    text-align: center;
    width: 90%;
    line-height: 40px;
    margin: 0 auto;
    color: #dd001b;
    border: 1px solid #dd001b;
    border-radius: 20px;
    cursor: pointer;
}
}
</style>